<template>
  <div class="log absolute">
    <div class="back">
      <img src="http://diandian.zgkpz.com/images/m_log/cha.png" @click="back" />
    </div>
    <div class="main">
      <p>小浣熊</p>
      <p>今天新闯关了<span>2</span>关，用时 <span>23分 05 秒</span></p>
      <p>
        总闯关数：<span>3</span> &nbsp;&nbsp;&nbsp;&nbsp; 总学习时长：
        <span>53分 05 秒</span>
      </p>
    </div>
    <div class="log_list">
      <div class="biaoti">
        <span>课程</span>
        <span>积分</span>
        <span>时长</span>
        <span>时间</span>
      </div>
      <div class="for_list">
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
      </div>
    </div>
    <div class="list_pag">
      <button v-for="(item, index) in pagList" :key="index">
        {{ item.name }}
      </button>
    </div>
  </div>
</template>

<script>
const NAME = "User";
export default {
  name: NAME,
  props: {},
  data: function () {
    return {
      pagList: [
        { id: 0, name: "首页" },
        { id: 1, name: "1" },
        { id: 2, name: "2" },
        { id: 3, name: "3" },
        { id: 4, name: "4" },
        { id: 5, name: "5" },
        { id: 6, name: "6" },
        { id: 7, name: "7" },
        { id: 8, name: "8" },
        { id: 9, name: "9" },
        { id: 10, name: "末页" },
      ],
      userInfo: {},
    };
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  mounted: function () {},
  methods: {
    handleResize() {
      if (document.body.clientWidth > 768) {
        this.$router.replace({ path: "/web/log" });
      }
    },
    back() {
      this.$router.replace({ path: "/main" });
    },
  },
};
</script>

<style scoped>
.back {
  padding: 0.25rem;
}
.back img {
  width: 0.5rem;
}
.main {
  text-align: center;
  color: #ffffff;
  font-size: 0.3rem;
  position: relative;
  top: 15%;
  line-height: 0.5rem;
}
.main span {
  color: #f7ff9f;
}
.biaoti {
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
  color: #ffffff;
  font-size: 0.35rem;
}
.log_list {
  padding: 0.2rem;
  position: relative;
  top: 2.8rem;
}
.list {
  width: 90%;
  margin-left: 5%;
  height: 0.65rem;
  line-height: 0.65rem;
  display: inline-flex;
  justify-content: space-around;
  color: #e08b4c;
  font-size: 0.3rem;
  background: url("http://diandian.zgkpz.com/images/m_log/back.png") no-repeat;
  background-size: 100%100%;
}
.for_list {
  height: 5rem;
  line-height: 0.85rem;
  overflow-y: auto;
}
@media (min-height: 737px) and (max-height: 812px) {
  .main {
    position: relative;
    top: 16%;
  }
  .log_list {
    position: relative;
    top: 3.8rem;
  }
}
@media (min-height: 813px) and (max-height: 1024px) {
  .main {
    position: relative;
    top: 1.2rem;
    font-size: 0.25rem;
    line-height: 0.4rem;
  }
  .log_list {
    position: relative;
    top: 1.8rem;
  }
  .for_list {
    height: 3.4rem;
  }
}
.list_pag {
  position: absolute;
  bottom: 0.47rem;
  width: 100%;
  display: flex;
  justify-content: center;
}
.list_pag button {
  color: #b16243;
  background-color: #fee29e;
  margin: 0 0.035rem;
  padding: 0.01rem 0.15rem;
  font-size: 0.3rem;
}
</style>
